<template>
  <div class="user-cernter">
    <x-header>{{paramInfo?paramInfo.name:''}} <router-link to="/" slot="right"> <a class="fa fa-home fa-15x"></a> </router-link></x-header>
    <div class="nav-box">
      <div class="nav-item-box">
        <div class="nav-item">
          <div class="nav-navList-box">
            <ul class="nav-navList-ul">
              <li class="nav-navList-li" v-for="(item,index) in TreeList" :key="index">
                <a @click="toPage(item)">
                  <i :class="item.desc?item.desc:'fa-sun-o'" :style="`background-color:${bgColor[index%8]}`" class="fa"></i>
                  <p class="nav-label">{{item.name}}</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
export default {
  created () {
    this.paramInfo = this.$route.query
    this.getData()
  },
  mounted () {
  },
  methods: {
    toPage (data) {
      if (data.children && data.children.length > 0) {
        this.$router.push({name:'gzTypeInDetails',params:{data:data,taskId:this.paramInfo.taskId}})
      } else {
        Vue.tools.toast('无可录入项',"warn")
      }
    },
    getData() {
      this.TreeList = []
      let childList = []
      this.baseService.postForm(
        this.__ctx + "/sys/sysTreeNode/getNodes",
        {treeId: "436635096858755073" }
      ).then(data => {
        if (Array.isArray(data)) {
          for (let i in data) {
            if (data[i].parentId == '0') {
              this.TreeList.push(data[i])
            } else {
              childList.push(data[i])
            }
          }
          for (let i in this.TreeList) {
            this.TreeList[i].children = []
            for (let j in childList) {
              if (this.TreeList[i].id == childList[j].parentId) {
                this.TreeList[i].children.push(childList[j])
              }
            }
          }
        } else {
          Vue.tools.toast(data.msg,"warn");
        }
      });
    },
  },
  name: "gaTypeinData",
  data() {
    return {
      TreeList: [],
      paramInfo: {},
      bgColor: ["#2f54eb","#722ed1","#eb2f96","#ff7a45","#ffa940","#2f54eb","#722ed1","#eb2f96","#ff7a45"]
    }
  }
};
</script>

<style scoped lang="less">
.user-cernter {
  background-color: #f0f0f0;
  .nav-box {
    width: 93%;
    margin: 21px auto 0;
    .nav-item-box {
      padding-top: 1px;
      .nav-item {
        border-radius: 5px;
        background-color: #fff;
        margin-top: 15px;
        .nav-navList-box {
          .nav-navList-ul {
            *zoom: 1;
            &::after {
              content: "";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
            .nav-navList-li {
              float: left;
              margin-bottom: 15px;
              a {
                display: block;
                width: 90px;
                height: 110px;
                text-align: center;
                position: relative;
                .fa {
                  width: 55px;
                  height: 55px;
                  color: #fff;
                  border-radius: 8px;
                  position: relative;
                  margin-top: 10px;
                  &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
                .nav-label {
                  font-size: 1.2em;
                  line-height: 1.3;
                  color: #333;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  width: 80%;
                  margin: 0 auto;
                  padding: 3px 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
